<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-06-29 13:50:50
 * @LastEditTime: 2023-07-19 17:53:24
 * @FilePath: \myblog\src\views\HomeView.vue
-->
<template>
  <div class="blog-page">
    <el-container class="blog-conatiner">
      <BaseHeader/>
      <el-container class="blog-middle">
        <el-row type="flex" class="blog-middle-wrap">
          <el-col :span="2" :offset="2"><BaseCircleMenu :btnlist="btnlist" v-if="$store.state.token"/></el-col>
          <el-col :span="16" >
            <el-main class="blog-main">
              <keep-alive include="ArticleList">
                <vue-scroll :ops="ops" @handle-scroll="handleScroll" style="width:100%;height:100%">
                <router-view v-if="isRouteLoading" :loading="loading"/>
                </vue-scroll>
              </keep-alive>
            </el-main>
          </el-col>
          <el-col :span="4" class="hidden-xs-only"><BaseAside v-if="$store.state.token"/></el-col>
        </el-row>
      </el-container>
      <el-footer class="blog-footer">
        <div class="blog-footer-con">
          <p>&copy;2023 By Wyatt</p>
          <p>Hi, weclome to my blog</p>
        </div>
      </el-footer>
    </el-container>
    <BaseModal>
    </BaseModal>
  <BaseLive2D/>
  </div>
</template>

<script>
import _throttle from 'lodash/throttle'
import BaseLive2D from '@/components/BaseLive2d.vue'
import BaseCircleMenu from '@/components/base/BaseCircleMenu.vue'
import BaseHeader from '@/components/base/BaseHeader.vue'
import BaseModal from '@/components/base/BaseModal.vue'
import BaseAside from '@/components/base/BaseAside.vue'
import { mapGetters } from 'vuex'
import BTN_LIST from '@/config/circle.config'
// @ is an alias to /src
const TH = 200
export default {
  name: 'HomeView',
  components: {
    BaseModal,
    BaseHeader,
    BaseAside,
    BaseCircleMenu,
    BaseLive2D
},
provide() {
  return {
    'changeLoading': this.changeLoading
  }
},
  methods: {
    reload(){
      this.isRouteLoading = false;
      //DOM渲染完成后触发
      this.$nextTick(function () {
        this.isRouteLoading = true;
      })
    },
    changeLoading() {
    this.loading = false
  },
    handleScroll: _throttle(function(vertical,horizontal,nativeEvent) {
      if (!this.loading)
      {
        let scrollTop = vertical.scrollTop;
        let scrollHeight = nativeEvent.srcElement.scrollHeight - nativeEvent.srcElement.clientHeight;
        if (scrollTop + TH  > scrollHeight)
      {
        this.loading = true;
        console.log('加载更多')
      }
      }
    }, 1000, false) 
  },
  created() {
  let isLogin = this.$store.state.token
  if (isLogin)
  {
    this.$store.dispatch('getUserInfo')
  }
  this.btnlist = BTN_LIST['index'] || [];
  },
  
  data() {
    return {
      search: '',
      isShow: false,
      btnlist: [],
      loading: false,
      isRouteLoading: true,
      ops: {
                    vuescroll: {},
                    scrollPanel: {},
                    rail: {
                      background: '#01a99a',
                      opacity: 0,
                      size: '10px',
                      specifyBorderRadius: false,
                      gutterOfEnds: null,    //轨道距 x 和 y 轴两端的距离
                      gutterOfSide: '0',   //距离容器的距离
                      keepShow: false,   //是否即使 bar 不存在的情况下也保持显示
                      border:'none'    //边框
                    },
                    bar: {
                        hoverStyle: true,    
                        onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
                        background: 'grey',   //颜色
                    }
                },
    }
},
computed: {
  ...mapGetters(['userInfo'])
},
watch: {
  $route(to)
  {
    this.btnlist = BTN_LIST[to.name] || [];
    this.loading = true;
    this.reload();
  }
}
}
</script>

<style lang="scss">
  html,body {
  overflow: hidden;
  height: 100vh;
}

  .blog-conatiner{
    overflow: hidden;
    height: 100%;
    .blog-middle {
      height: 80vh;
      background-color: #f1f1f1;
      .blog-middle-wrap {
        width: 100%;
      }
      .blog-main {
        height: 100%;
      }
    }
    .blog-footer {
      background-color: #f58f98;
      display: flex;
      justify-content: center;
      align-items: center;
      .blog-footer-con {
        width: 200px;
        text-align: center;
        p {
          margin-top: 5px;
          color: #fff;
        }
      }
    }
  }
</style>
